<template>
  <div class="server">
    <div class="header">
      <table>
        <tr>
          <td colspan="12" style="position: absolute; right: 30px">
            <el-button
              type="success"
              size="small"
              @click="sendServer()"
              icon="el-icon-plus"
            >
              新建服务器
            </el-button>
          </td>
        </tr>
      </table>
    </div>
    <div class="content">
      <el-main style="margin-top: 60px" v-loading="loading">
        <el-table
          class="table"
          border
          style="width: 100%"
          :header-cell-style="{
            color: '#333',
            fontFamily: 'MicrosoftYaHeiUI',
            fontWeight: 500,
            fontSize: '16px',
          }"
          :fit="true"
          :data="tableData.slice((currentPage - 1) * pageSize,currentPage * pageSize)"
        >
          <el-table-column
            prop="serverId"
            sortable
            label="服务器ID"
          ></el-table-column>
          <el-table-column
            prop="serverName"
            sortable
            label="服务器名称"
          ></el-table-column>
          <el-table-column
            prop="openTime"
            width="175"
            sortable
            :formatter="formatDate"
            label="开服时间"
          ></el-table-column>
          <el-table-column
            prop="serverIp"
            sortable
            label="登录IP"
          ></el-table-column>
          <el-table-column
            prop="loginPort"
            sortable
            label="登录端口号"
          ></el-table-column>
          <el-table-column
            prop="gateIp"
            sortable
            label="网关IP"
          ></el-table-column>
          <el-table-column
            prop="gatePort"
            sortable
            label="网关端口号"
          ></el-table-column>
          <el-table-column
            prop="newIcon"
            sortable
            label="新服图标"
          ></el-table-column>
          <el-table-column
            prop="gmUrl"
            sortable
            width="230"
            label="gmUrl"
          ></el-table-column>
          <el-table-column prop="enabled" sortable label="服务器状态">
            <template slot-scope="scope">
              <span v-if="scope.row.enabled == false" style="color: red">已禁用</span>
              <span v-if="scope.row.enabled" style="color: green">已启用</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="200">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="primary"
                @click="dialogEdit(scope.row)"
              >查看/编辑</el-button>
              <el-button
                size="mini"
                type="danger"
                v-if="scope.row.enabled"
                @click="Disable(scope.row)"
              >禁用</el-button>
              <el-button
                size="mini"
                v-if="scope.row.enabled == false"
                type="success"
                @click="Enable(scope.row)"
              >启用</el-button>
            </template>
          </el-table-column>
        </el-table>
        <pageNation
          :total="tableData.length"
          :page-size="pageSize"
          @pageChange="pageChange"
          :page_index="currentPage"
        />
      </el-main>
      <ServerDialog
        :dialog="dialog"
        :ServerForm="ServerForm"
        @saveServer="getfileMsg($event)"
      />
    </div>
  </div>
</template>
<script>
import ServerDialog from "../../components/gmtool/ServerDialog";
import pageNation from "../../components/pagenation/pageNation";
import { formatDate, getTime } from "../../utils/index";
export default {
  name: "Server",
  components: { ServerDialog, pageNation },
  data() {
    return {
      currentPage: 1,
      pageSize: 10,
      tableData: [],
      loading: false,
      formatDate: formatDate,
      ServerForm: {
        id: "",
        serverId: "",
        serverName: "",
        serverIp: "",
        loginPort: "",
        newIcon: "",
        gmUrl: "",
        openTime: "",
        gatePort: "",
        gateIp: "",
      },
      dialog: {
        show: false,
        title: "",
        option: "edit", //默认为编辑操作
      },
    };
  },
  mounted() {
    this.getServerMsg();
  },
  methods: {
    //获取服务器列表信息
    getServerMsg() {
      let arr = [];
      this.loading = true;
      this.$http.get("/api/gmtool/getServer").then((res) => {
        if (res.data.code == 200) {
          res.data.result.forEach((item) => {
            let obj = {
              serverId: item.serverId,
              serverName: item.serverName,
              enabled: item.enabled,
              serverIp: item.serverIp,
              loginPort: item.loginPort,
              newIcon: item.newIcon,
              gmUrl: item.gmUrl,
              openTime: item.openTime,
              gateIp: item.gateIp,
              gatePort: item.gatePort,
            };
            arr.push(obj);
          });
          this.tableData = arr;
          this.loading = false;
        } else {
          this.$message({ type: "warning", message: "没有对应数据" });
          this.loading = false;
        }
      });
    },
    //分页
    pageChange(item) {
      this.currentPage = item.page_index;
      this.pageSize = item.page_limit;
    },
    //查看编辑
    dialogEdit(row) {
      let openServerTime = "";
      if (row.openTime == 0) {
        openServerTime = "";
      } else {
        openServerTime = row.openTime * 1000;
      }
      this.dialog = {
        show: true,
        title: "编辑服务器",
        option: "edit",
      };
      this.ServerForm.id = row.serverId;
      this.ServerForm.serverId = row.serverId;
      this.ServerForm.serverName = row.serverName;
      this.ServerForm.serverIp = row.serverIp;
      this.ServerForm.loginPort = row.loginPort;
      this.ServerForm.newIcon = row.newIcon;
      this.ServerForm.gmUrl = row.gmUrl;
      this.ServerForm.openTime = openServerTime;
      this.ServerForm.gateIp = row.gateIp;
      this.ServerForm.gatePort = row.gatePort;
      this.ServerForm.enabled=row.enabled;
    },
    //禁用
    Disable(row) {
      this.$confirm("确定禁用服务器吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
          this.$http.post("/api/gmtool/disableServer", {
              serverId: row.serverId,
              user_actions: `禁用服务器id为${row.serverId}的服务器`,
              date: getTime(new Date()),
          }).then((res) => {
              if (res.data.code == 200) {
                this.$message.success(res.data.msg);
                this.getServerMsg();
              }
          });
        }).catch(() => {
          return;
        });
    },
    //启用
    Enable(row) {
      if (row.openTime == undefined || row.openTime == "") {
        this.$message({
          type: "warning",
          message: "开服时间为空无法启用服务器",
        });
        return;
      }
      this.$confirm("确定启用服务器吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
          this.$http.post("/api/gmtool/enableServer", {
              serverId: row.serverId,
              user_actions: `启用服务器id为${row.serverId}的服务器`,
              date: getTime(new Date()),
          }).then((res) => {
              if (res.data.code == 200) {
                this.$message.success(res.data.msg);
                this.getServerMsg();
              }
            });
        }).catch(() => {
          return;
        });
    },
    //新增服务器
    sendServer() {
      this.dialog = {
        show: true,
        title: "新建服务器",
        option: "add",
      };
      this.ServerForm.serverId = "";
      this.ServerForm.serverName = "";
      this.ServerForm.serverIp = "";
      this.ServerForm.loginPort = "";
      this.ServerForm.newIcon = "";
      this.ServerForm.gmUrl = "";
      this.ServerForm.openTime = "";
      this.ServerForm.gateIp = "";
      this.ServerForm.gatePort = "";
    },

    //获取弹出层的数据
    getfileMsg(server) {
      if(server.enabled==true){
        if(server.openTime===""||server.openTime===0||server.openTime==undefined){
            this.$message({type:"warning",message:"开服时间不能为空"})
            return;
        }
      }
      if(this.dialog.option == "add"){
          this.$http.post(`/api/gmtool/addServer`, {
            user_actions: `添加服务器`,
            date: getTime(new Date()),
            serverId: server.serverId,
            serverName: server.serverName,
            serverIp: server.serverIp,
            loginPort: server.loginPort,
            newIcon: server.newIcon,
            gmUrl: server.gmUrl,
            openTime: server.openTime,
            gateIp: server.gateIp,
            gatePort: server.gatePort,
        }).then((res) => {
          if (res.data.code == 200) {
            this.$message.success(res.data.msg);
            this.getServerMsg();
          } else {
            this.$message({ type: "warning", message: res.data.msg });
          }
        });
      }else{
        this.$http.post(`/api/gmtool/updServer/${server.id}`, {
            user_actions: `编辑服务器`,
            date: getTime(new Date()),
            serverId: server.serverId,
            serverName: server.serverName,
            serverIp: server.serverIp,
            loginPort: server.loginPort,
            newIcon: server.newIcon,
            gmUrl: server.gmUrl,
            openTime: server.openTime,
            gateIp: server.gateIp,
            gatePort: server.gatePort,
        }).then((res) => {
          if (res.data.code == 200) {
            this.$message.success(res.data.msg);
            this.getServerMsg();
          } else {
            this.$message({ type: "warning", message: res.data.msg });
          }
        });
      }
    },
  },
};
</script>
<style scoped>
.server {
  width: 100%;
  height: auto;
  background-color: #fff;
}
.server td {
  padding: 18px;
  font-size: 14px;
  display: flex;
  float: left;
}
</style>